<template>
  <Row>
    <Col :span="3">
      <hierTree
        :data="current.elements"
        v-bind="treeAttrs"
        :ref="'tree'"
        @select="select"
        @add="add"
        @remove="remove"
        @menu="menu"
      ></hierTree>
    </Col>
    <Col v-if="item" :span="21">
      <cfg-form
        :ref="'form'"
        v-bind="formAttrs"
        :data="item"
        @change="formChange"
      ></cfg-form>
      <cfg-form
        :ref="'formValues'"
        v-bind="valuesAttrs"
        :data="item.values"
      ></cfg-form>
    </Col>
  </Row>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      item: null,
    };
  },
  props: {
    current: {
      default: () => {
        return {};
      },
    },
  },
  watch: {},
  computed: {
    treeAttrs() {
      return {
        title: {
          "en-US": "Element List",
          "zh-CN": "Element List",
        }[this.G_Locale],
        rootId: null,
        nameId: "id",
        namePid: "parentId",
        nameTitle: "id",
        rootEnable: true,
        menuEnable: true,
        addEnable: true,
        removeEnable: true,
        menus: [],
      };
    },
    formAttrs() {
      return {
        labelWidth: 100,
        labelPosition: "right",
        cols: 2,
        columns: [
          {
            key: "id",
            title: "id",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "text",
            },
          },
          {
            key: "type",
            title: "类型",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options: [
                { value: "rect", label: "矩形" },
                { value: "circle", label: "圆形" },
                { value: "ellipse", label: "椭圆" },
                { value: "semiCircle", label: "半圆" },
                { value: "path", label: "路径" },
                { value: "polygon", label: "多边形" },
                { value: "text", label: "文字" },
              ],
            },
          },
          {
            key: "groupId",
            title: "所在组",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:this.current.groups?this.current.groups.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[]
            },
          },
        ],
        rules: {
          type: [
            { required: true, message: "请输入所属类型", trigger: "blur" },
          ],
          className: [
            { required: true, message: "请输入模型类名", trigger: "blur" },
          ],
        },
        onlyRead: false,
      };
    },
    valuesAttrs() {
      return this[this.item.type + "Attrs"];
    },
    rectAttrs() {
      return {
        labelWidth: 100,
        labelPosition: "right",
        cols: 2,
        columns: [
          {
            key: "x",
            title: "x",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "y",
            title: "y",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "rx",
            title: "rx",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "ry",
            title: "ry",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "width",
            title: "宽度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "height",
            title: "高度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "stoke",
            title: "边颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "fillId",
            title: "填充样式",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.fills?this.current.fills.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "fill",
            title: "填充颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "filter",
            title: "滤镜",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.filters?this.current.filters.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "stoke-width",
            title: "边宽度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
        ],
        rules: {
          type: [
            { required: true, message: "请输入所属类型", trigger: "blur" },
          ],
          className: [
            { required: true, message: "请输入模型类名", trigger: "blur" },
          ],
        },
        onlyRead: false,
      };
    },
    semiCircleAttrs() {
      return {
        labelWidth: 100,
        labelPosition: "right",
        cols: 2,
        columns: [
          {
            key: "x",
            title: "x",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "y",
            title: "y",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "width",
            title: "宽度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "height",
            title: "高度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "stoke",
            title: "边颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "fillId",
            title: "填充样式",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.fills?this.current.fills.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "fill",
            title: "填充颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "filter",
            title: "滤镜",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.filters?this.current.filters.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "stoke-width",
            title: "边宽度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
        ],
        rules: {
          type: [
            { required: true, message: "请输入所属类型", trigger: "blur" },
          ],
          className: [
            { required: true, message: "请输入模型类名", trigger: "blur" },
          ],
        },
        onlyRead: false,
      };
    },
    polygonAttrs() {
      return {
        labelWidth: 100,
        labelPosition: "right",
        cols: 2,
        columns: [
          {
            key: "x1",
            title: "x1",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "y1",
            title: "y1",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "x2",
            title: "x2",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "y2",
            title: "y2",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "x3",
            title: "x3",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "y3",
            title: "y3",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "x4",
            title: "x4",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "y4",
            title: "y4",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "stoke",
            title: "边颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "fillId",
            title: "填充样式",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.fills?this.current.fills.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "fill",
            title: "填充颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "filter",
            title: "滤镜",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.filters?this.current.filters.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "stoke-width",
            title: "边宽度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
        ],
        rules: {
          type: [
            { required: true, message: "请输入所属类型", trigger: "blur" },
          ],
          className: [
            { required: true, message: "请输入模型类名", trigger: "blur" },
          ],
        },
        onlyRead: false,
      };
    },
    ellipseAttrs() {
      return {
        labelWidth: 100,
        labelPosition: "right",
        cols: 2,
        columns: [
          {
            key: "cx",
            title: "cx",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "cy",
            title: "cy",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "rx",
            title: "rx",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "ry",
            title: "ty",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "stoke",
            title: "边颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "fillId",
            title: "填充样式",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.fills?this.current.fills.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "fill",
            title: "填充颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "filter",
            title: "滤镜",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.filters?this.current.filters.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "stoke-width",
            title: "边宽度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
        ],
        rules: {
          type: [
            { required: true, message: "请输入所属类型", trigger: "blur" },
          ],
          className: [
            { required: true, message: "请输入模型类名", trigger: "blur" },
          ],
        },
        onlyRead: false,
      };
    },
    textAttrs() {
      return {
        labelWidth: 100,
        labelPosition: "right",
        cols: 2,
        columns: [
          {
            key: "x",
            title: "x",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "y",
            title: "y",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "font-size",
            title: "文字尺寸",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "text-anchor",
            title: "文字位置",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "text",
            },
          },
          {
            key: "text",
            title: "文字内容",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "text",
            },
          },
          {
            key: "stoke",
            title: "边颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "fillId",
            title: "填充样式",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.fills?this.current.fills.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "fill",
            title: "填充颜色",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "color",
            },
          },
          {
            key: "filter",
            title: "滤镜",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "select",
              options:[{value:'',label:'无'}].concat(this.current.filters?this.current.filters.map(item=>{
                return {
                  value:item.id,
                  label:item.id
                }
              }):[])
            },
          },
          {
            key: "stoke-width",
            title: "边宽度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
        ],
        rules: {
          type: [
            { required: true, message: "请输入所属类型", trigger: "blur" },
          ],
          className: [
            { required: true, message: "请输入模型类名", trigger: "blur" },
          ],
        },
        onlyRead: false,
      };
    },
  },
  created() {},
  mounted() {},
  methods: {
    select(item) {
      this.item = item;
    },
    add(item) {
        this.current.elements.push(this.rectTpl())
    },
    remove(item) {
        this.current.elements.splice(this.current.elements.indexOf(item), 1);
        this.item = null;
    },
    menu(menu, item) {},
    formChange(key, value) {
        if(key==='type'){
            this.item.values = this[value + "Tpl"]().values;
        }
    },
    setTree(fn) {
      this.$refs.tree.$children[0].setTree(fn);
    },
    rectTpl() {
      return {
        id: "rect",
        groupId: "1",
        type: "rect",
        values: {
          x: 0,
          y: 0,
          rx: 0,
          ry: 0,
          width: 300,
          height: 100,
          stoke: "",
          fillId: "linear2",
          fill: "green",
          filter: "point1",
          "stoke-width": 0,
        },
      };
    },
    polygonTpl() {
      return {
        id: "polygon",
        groupId: "1",
        type: "polygon",
        values: {
          x1: 0,
          y1: 0,
          x2: 50,
          y2: 200,
          x3: 100,
          y3: 200,
          x4: 150,
          y4: 0,
          stoke: "",
          fillId: "linear1",
          fill: "green",
          filter: "point1",
          "stoke-width": 0,
        },
      };
    },
    ellipseTpl() {
      return {
        id: "ellipse",
        groupId: "1",
        type: "ellipse",
        values: {
          cx: 100,
          cy: 50,
          rx: 50,
          ry: 25,
          stoke: "",
          fillId: "linear1",
          fill: "green",
          filter: "point1",
          "stoke-width": 0,
        },
      };
    },
    semiCircleTpl() {
      return {
        id: "semiCircle",
        groupId: "1",
        type: "semiCircle",
        values: {
          x: 100,
          y: 100,
          width: 200,
          height: 100,
          stoke: "",
          fillId: "linear1",
          fill: "green",
          filter: "point1",
          "stoke-width": 0,
        },
      };
    },
    textTpl() {
      return {
        id: "text",
        groupId: "1",
        type: "text",
        values: {
          x: 0,
          y: 0,
          "font-family": "Arial",
          "font-size": 250,
          stoke: "",
          fillId: "linear1",
          fill: "green",
          filter: "point1",
          "stoke-width": 0,
          "text-anchor": "start",
          text: "abc",
        },
      };
    },
  },
};
</script>
<style scoped>
</style>